
<template>
  <div class="containerWrap" style="margin-top: 20px">
    <el-row >
      <el-col :span="8">
        <div class="content_title">活动基本信息</div>
        <div class="grid-content bg-purple formPosition" >
          <el-form class="demo-form-inline" label-width="150px">
            <el-form-item label="活动名称">
              <el-input  placeholder="请输入活动名称40个字以内"></el-input>
            </el-form-item>
            <el-form-item label="活动模板">
              <el-select placeholder="活动区域" value="beijing">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="【节日版】 背景">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="评论发送">
              <el-radio label="1">先发后审</el-radio>
              <el-radio  label="2">先审后发</el-radio>
            </el-form-item>
            <el-form-item label="弹幕状态">
              <el-radio  label="1">关闭</el-radio>
              <el-radio  label="2">开启</el-radio>
            </el-form-item>
            <el-form-item label="倒计时状态">
              <el-radio  label="1">关闭</el-radio>
              <el-radio  label="2">开启</el-radio>
            </el-form-item>
            <el-form-item label="倒计时结束后">
              <el-radio  label="1">不自动播放</el-radio>
              <el-radio  label="2">自动播放</el-radio>
            </el-form-item>
            <el-form-item label="直播倒计时">
              <el-date-picker
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="在线人数">
              <el-radio  label="1">实时在线人数</el-radio>
              <el-radio  label="2">累计在线人数</el-radio>
            </el-form-item>
            <el-form-item label="加权倍数" prop="">
              <el-input placeholder="请输入在线人数的加权倍数1-10"></el-input>
            </el-form-item>
            <el-form-item label="加权基数" prop="">
              <el-input placeholder="请输入在线人数显示基数，如100"></el-input>
            </el-form-item>
          </el-form>
          <div class="buttonWrap">
            <el-button type="primary" >保存活动基本信息</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="color: #fff">
        11
        </div>
      </el-col>
      <el-col :span="10">
        <div class="content_title">活动配置信息</div>
        <div class="grid-content bg-purple formPosition" >
          <el-form class="demo-form-inline" label-width="150px" >
            <el-form-item label="微信分享标题">
              <el-input  placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="微信分享描述">
              <el-input  type='textarea' placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="微信分享图片200*200">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div class="buttonWrap">
           <el-button type="primary" >保存活动配置信息</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
  export default {
    data () {
      return {
        tableData: [],
        activeName: '0',
        imageUrl: ''
      };
    },
    methods: {
      // 关键字搜索
      searchByWord () {
        alert('关键字搜索');
      },
      // 编辑
      edit () {
        alert('编辑');
      },
      // 冻结
      freeze () {
        alert('冻结');
      },
      // 删除
//      delete () {
//        alert('删除');
//      },
      // 切换tab页签
      handleClick (tab, event) {
        this.activeName = tab.name;
        alert('切换Tab页签');
      },
      // 文件上传前限制上传图片格式大小
      beforeAvatarUpload (file) {
        alert('封装在工具类供所有上传使用');
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    components: {},
    created: function () {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .formPosition{
    margin-top: 50px;
  }

</style>
